<template>
  <div class="permission">
    <div class="title">Role Introduction</div>
    <!-- <template
      v-for="item in permission_desc.permission_data_list"
      :key="item.id"
    >
      <div class="row">
        <div class="name">{{ item.name }}:</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </template> -->
    <div class="footer">
      <div class="row">
        <div class="name">Super User:</div>
        <div class="desc">All permissions.</div>
      </div>
      <div class="row">
        <div class="name">General User:</div>
        <div class="desc">View only.</div>
      </div>
    </div>
  </div>
  <el-tabs type="border-card" stretch v-model="currentTab">
    <el-tab-pane name="roles">
      <template #label>
        <div class="r_title">Roles</div>
      </template>
      <div class="role_card">
        <template v-for="permission in PerissionList" :key="permission.id">
          <lz-card :title="permission.name" class="content">
            <div v-if="permission.name == 'MRR Super User'">
              <el-tooltip
                content="PMT Lead Only"
                placement="bottom"
                effect="customized"
              >
                <el-button
                  type="info"
                  round
                  @click="handleRequest(permission)"
                  :disabled="permission.requested"
                  >Request</el-button
                >
              </el-tooltip>
            </div>
            <div v-else>
              <el-button
                type="info"
                round
                @click="handleRequest(permission)"
                :disabled="permission.requested"
                >Request</el-button
              >
            </div>
          </lz-card>
        </template>
      </div>
    </el-tab-pane>
    <el-tab-pane name="requests">
      <template #label>
        <div class="r_title">My Requests</div>
      </template>
      <div class="request_card">
        <template v-for="(item, key) in RequestList" :key="key">
          <lz-card :title="key" class="request_content">
            <lz-table :listData="item" v-bind="contentTableConfig">
              <!-- 1.header中的插槽 -->
              <!-- 2.列中的插槽 -->
              <template #status="scope">
                <el-button v-if="scope.row.status === 1" type="warning">
                  pending
                </el-button>
                <el-button v-if="scope.row.status === 2" type="success">
                  approved
                </el-button>
              </template>
            </lz-table>
          </lz-card>
        </template>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useStore } from '@/store'

import LzCard from '@/base-ui/card'
import LzTable from '@/base-ui/table'

import { contentTableConfig } from './config/content.config'
// import { getListData } from '@/service/main/system/system'

export default defineComponent({
  name: 'department',
  components: {
    LzCard,
    LzTable
  },
  setup() {
    const store = useStore()
    const currentTab = ref('roles')

    const getPageData = () => {
      store.dispatch('system/getPermissionListAction', {
        pageName: 'permission'
      })
    }
    console.log('111')
    getPageData()

    // const permission_desc = reactive({
    //   permission_data_list: []
    // })
    // 3.从vuex中获取数据
    const PerissionList = computed(() =>
      store.getters[`system/pageListData`]('permission')
    )
    const RequestList = computed(() =>
      store.getters[`system/pageListData`]('requests')
    )

    const handleRequest = (permission: any) => {
      console.log(permission)
      store.dispatch('system/requestPermissionAction', {
        permission
      })
    }

    // const get_permission_desc_data = async () => {
    //   const pageResult = await getListData(
    //     '/permission/get_permission_desc_data'
    //   )
    //   console.log(pageResult.data)
    //   permission_desc.permission_data_list = pageResult.data.list
    // }
    // get_permission_desc_data()

    return {
      PerissionList,
      RequestList,
      currentTab,
      contentTableConfig,
      handleRequest
      // permission_desc
    }
  }
})
</script>

<style>
.el-tabs--border-card {
  background: #92dcc2;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background: #92dcc2;
  color: black;
}
</style>

<style scoped lang="less">
.r_title {
  font-size: 20px;
  font-weight: 600;
}
.permission {
  padding: 20px;
  border-bottom: 20px solid #f5f5f5;
  background-color: #92dcc2;

  .title {
    font-size: 25px;
    font-weight: 600;
    // text-decoration: underline;
  }
  .footer {
    margin-top: 20px;
  }
  .row {
    display: flex;
    .name {
      color: #000;
      font-weight: 600;
    }
    .desc {
      margin-left: 10px;
      text-align: left;
      // word-break: normal;
      // word-wrap: break-word;
      // white-space: pre-wrap;
    }
  }
}
.role_card {
  display: flex;
  flex-wrap: wrap;
  // padding-bottom: 20px;
  .content {
    width: 200px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
}

.request_card {
  display: flex;
  flex-wrap: wrap;
  .request_content {
    width: 500px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
:deep(.header) {
  height: 0;
}
</style>
